<template>
	<view class="addCompany_wrapper">
		<view class="addcompany_form">
			<up-form :model="model1" :rules="rules" labelPosition="top"  ref="uFormRef">
				<up-form-item label="院校名称:" prop="schoolName" ref="schoolName" labelWidth="auto">
					<up-input v-model="model1.schoolName" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="修读期:" prop="startDate" ref="startDate" labelWidth="auto">
					<view class="s-flex-r-s-c">
						<view class="flex1" @click="()=>{showdatetime=true}">
							<up-input readonly v-model="model1.startDate" border="none" placeholder="选择时间"></up-input>
						</view>
						<text class="jian">-</text>
						<view class="flex1" @click="()=>{showdatetime2=true}">
							<up-input readonly class="flex1" v-model="model1.endDate" border="none" placeholder="请输入"></up-input>
						</view>
					</view>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="修读方式:" prop="readTypeName" labelWidth="auto" @click="()=>{showPick=true}">
					<up-input readonly v-model="model1.readTypeName" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="专业:" prop="speciality" ref="Name" labelWidth="auto">
					<up-input v-model="model1.speciality" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="学历:" prop="education" ref="percent" labelWidth="auto">
					<up-input v-model="model1.education" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
			</up-form>
		</view>
		<view class="apply-btn-wrapper s-flex-r-s-c">
			<view class="del-btn s-flex-c-c-c" v-if="model1.index!==undefined" @click="del">
				<text>删除</text>
			</view>
			<view class="apply-btn" @click="handleSave">
				<text>保存</text>
			</view>
		</view>
		<up-picker :show="showPick" title="修读方式" keyName="name" :columns="readTypeLists" @confirm="handleConfirmIdentity"
			@cancel="()=>{showPick=false}"></up-picker>
		<up-datetime-picker :show="showdatetime" :minDate="752480000"
            :maxDate="17867785550000" v-model="date1" mode="date" format="YYYY-MM-DD"
	
			@confirm="handleConfirmTime" @cancel="()=>{showdatetime=false}"></up-datetime-picker>
		<up-datetime-picker :minDate="752480000"
            :maxDate="17867785550000" :show="showdatetime2" v-model="date2" mode="date" format="YYYY-MM-DD"
			@confirm="handleConfirmTime2" @cancel="()=>{showdatetime2=false}"></up-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {onLoad} from "@dcloudio/uni-app"
	const model1 = ref({
		schoolName:''
	})
	onLoad((e)=>{
		console.log('e: ', e)
		if(e.form){
			model1.value = JSON.parse(e.form)
		}
	})
	// 表单引用
	const date1 = ref('');
	const date2 = ref('');
	const uFormRef = ref(null);
	const showPick = ref(false)
	const showdatetime = ref(false)
	const showdatetime2 = ref(false)
	const readTypeLists = ref([])
	const eduLists = ref([])
	const rules = {
		schoolName: [{
			required: true,
			message: '请输入院校名称',
			trigger: ['blur', 'change'],
		}],
		startDate: [{
			required: true,
			message: '请选择修读期',
			trigger: ['blur', 'change'],
		}],
		readTypeName: [{
			type: 'string',
			message: '请选择修读方式',
			trigger: ['blur', 'change'],
		}],
		speciality: [{
			required: true,
			message: '请输入专业',
			trigger: ['blur', 'change'],
		}],
		education: [{
			required: true,
			message: '请输入学历',
			trigger: ['blur', 'change'],
		}],
	}
	function handleConfirmIdentity(e) {
		model1.value.readTypeId = e.value[0].id
		model1.value.readTypeName = e.value[0].name
		showPick.value = false
	}
	function getDict() {
		// 获取修读方式列表
		proxy.$request({
			url: 'api/Service/getReadTypeLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				readTypeLists.value = [res.data]
			}
		})
		// 获取拟报学历列表
		proxy.$request({
			url: 'api/Service/getProEduLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				eduLists.value = [res.data]
			}
		})
	}
	getDict()
	function handleSave() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				console.log('model1.value: ', model1.value)
				uni.$emit('eductaion',unref(model1.value))
				uni.navigateBack()
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
	function handleConfirmTime(e) {
		showdatetime.value = false
		model1.value.startDate = proxy.$u.timeFormat (date1.value,'yyyy-mm-dd')
	}
	function handleConfirmTime2(e) {
		showdatetime2.value = false
		model1.value.endDate = proxy.$u.timeFormat (date2.value,'yyyy-mm-dd')
	}
	function del() {
		uni.$emit('eductaion',{index:model1.value.index,del:1})
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.jian{
		margin-right: 20rpx;
	}
	.addCompany_wrapper {

		.addcompany_form {
			padding: 10rpx 32rpx;
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;
			padding: 0 30rpx;
			box-sizing: border-box;
			.del-btn{
				width: 214rpx;
				height: 96rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #FF7139;
				font-weight: 500;
				font-size: 32rpx;
				color: #FF7139;
				line-height: 38rpx;
				margin-right: 34rpx;
			}
			.apply-btn {
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
				flex: 1;
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}
	}
</style>